import React, { Component } from 'react';

/* 
  1.组件更新时
  new props进行更新
*/

class Demo extends Component{
  state={

  }
  static getDerivedStateFromProps(props,state){
    console.log("1.更新时 执行 getDerivedSateFromProps")
    return null
  }
  shouldComponentUpdate(nextProps,nextState){
    console.log("2.更新时 执行 shouldComponentUpdate")
    /*     优化  减少不必要更新 */
    if(nextProps.msg ===this.props.msg){
      return false
    }
    return true;//组件更新
  }
  render(){
    console.log("3.更新时 执行render函数")
    return <h1 >Demo组件{this.props.msg}</h1>
  }
  getSnapshotBeforeUpdate(props,state){
    console.log("4.更新时 执行getSnapshotBeforeUpdate")
    return 100;
  }
  componentDidUpdate(props,state,snapshot){
    console.log("5.更新时 执行了 componentDidUpdate")
      console.log("来自 getSnapshotBeforeUpdate 的值",snapshot)
  }
}
class App extends Component {
  state ={
    msg:"🐂"
  }
  handleClick=(params) => {
    this.setState({
      msg:"🐂"
    })
  }
  render() {
    return (
      <div>
        <Demo msg={this.state.msg}></Demo>
        <button onClick={this.handleClick}>点击变🐖</button>
      </div>
    );
  }
}

export default App;
